<template>
  <div class="overflow-order-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>报溢单</h2>
      <el-button type="text" @click="handleBack">返回</el-button>
    </div>

    <!-- 查询表单区域 -->
    <el-form 
      :model="searchForm" 
      ref="searchFormRef" 
      label-width="80px"
      class="search-form"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="录单时间">
            <el-date-picker 
              v-model="searchForm.recordTime" 
              type="date" 
              placeholder="选择录单时间" 
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单据编号">
            <el-input v-model="searchForm.orderNo" placeholder="输入单据编号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报溢人">
            <el-input v-model="searchForm.overflowPerson" placeholder="输入报溢人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="报溢仓库">
            <el-select v-model="searchForm.warehouse" placeholder="选择报溢仓库" clearable>
              <el-option 
                v-for="item in warehouseOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品名称">
            <el-input v-model="searchForm.productName" placeholder="输入产品名称" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="附加说明">
            <el-input v-model="searchForm.description" placeholder="输入附加说明" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 功能按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleAddOverflowOrder">新增报溢单</el-button>
    </div>

    <!-- 报溢单表格 -->
    <el-table 
      :data="overflowOrderList" 
      border 
      stripe 
      class="order-table"
      v-loading="loading"
    >
      <el-table-column prop="index" label="序号" width="50" />
      <el-table-column prop="overflowTime" label="报溢时间" sortable />
      <el-table-column prop="orderNo" label="报溢编号" />
      <el-table-column prop="productName" label="产品名称" />
      <el-table-column prop="productNo" label="产品编号" />
      <el-table-column prop="brand" label="归属品牌" />
      <el-table-column prop="spec" label="规格" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="retailPrice" label="零售价" />
      <el-table-column prop="discount" label="折扣" />
      <el-table-column prop="discountPrice" label="折扣价" />
      <el-table-column prop="specialPrice" label="特价" />
      <el-table-column prop="seckillPrice" label="秒杀价" />
      <el-table-column prop="inStockDate" label="入库时间" />
      <el-table-column prop="warehouse" label="仓库" />
      <el-table-column prop="stock" label="库存" />
      <el-table-column prop="inventoryQuantity" label="盘点数量" />
      <el-table-column prop="overflowQuantity" label="报溢数量" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag type="success">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination">
      <span class="total-info">共 {{ totalRecords }} 条 共 {{ totalPages }} 页</span>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :total="totalRecords"
        layout="prev, pager, next, jumper, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 新增报溢单弹窗 -->
    <el-dialog 
      v-model="addDialogVisible" 
      title="新增报溢单" 
      width="800px"
    >
      <el-form 
        :model="addForm" 
        ref="addFormRef" 
        :rules="addFormRules" 
        label-width="120px"
        class="add-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="录单时间" prop="recordTime">
              <el-date-picker 
                v-model="addForm.recordTime" 
                type="date" 
                placeholder="选择录单时间" 
                style="width: 100%;"
                :disabled="isEdit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单据编号" prop="orderNo">
              <el-input 
                v-model="addForm.orderNo" 
                placeholder="输入单据编号" 
                :disabled="isEdit"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报溢人" prop="overflowPerson">
              <el-input v-model="addForm.overflowPerson" placeholder="输入报溢人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报溢仓库" prop="warehouse">
              <el-select v-model="addForm.warehouse" placeholder="选择报溢仓库" clearable>
                <el-option 
                  v-for="item in warehouseOptions" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-select v-model="addForm.productName" placeholder="选择产品名称" clearable>
                <el-option 
                  v-for="item in productOptions" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品编号" prop="productNo">
              <el-input v-model="addForm.productNo" placeholder="输入产品编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="归属品牌" prop="brand">
              <el-input v-model="addForm.brand" placeholder="输入归属品牌" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格" prop="spec">
              <el-input v-model="addForm.spec" placeholder="输入规格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
              <el-input v-model="addForm.type" placeholder="输入类型" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零售价" prop="retailPrice">
              <el-input v-model="addForm.retailPrice" placeholder="输入零售价" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="折扣" prop="discount">
              <el-input v-model="addForm.discount" placeholder="输入折扣" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="折扣价" prop="discountPrice">
              <el-input v-model="addForm.discountPrice" placeholder="输入折扣价" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="特价" prop="specialPrice">
              <el-input v-model="addForm.specialPrice" placeholder="输入特价" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="秒杀价" prop="seckillPrice">
              <el-input v-model="addForm.seckillPrice" placeholder="输入秒杀价" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入库时间" prop="inStockDate">
              <el-date-picker 
                v-model="addForm.inStockDate" 
                type="date" 
                placeholder="选择入库时间" 
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存" prop="stock">
              <el-input v-model.number="addForm.stock" placeholder="输入库存" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="盘点数量" prop="inventoryQuantity">
              <el-input v-model.number="addForm.inventoryQuantity" placeholder="输入盘点数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报溢数量" prop="overflowQuantity">
              <el-input v-model.number="addForm.overflowQuantity" placeholder="输入报溢数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="附加说明" prop="description">
          <el-input 
            v-model="addForm.description" 
            placeholder="输入附加说明" 
            type="textarea"
            rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleSaveOverflowOrder"
        >
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 路由实例
const router = useRouter()

// 状态管理
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const totalRecords = ref(0)
const totalPages = ref(0)
const addDialogVisible = ref(false)
const isEdit = ref(false)

// 查询表单数据
const searchForm = reactive({
  recordTime: '',
  orderNo: '',
  overflowPerson: '',
  warehouse: '',
  productName: '',
  description: ''
})

// 新增表单数据
const addForm = reactive({
  recordTime: '',
  orderNo: '',
  overflowPerson: '',
  warehouse: '',
  productName: '',
  productNo: '',
  brand: '',
  spec: '',
  type: '',
  retailPrice: '',
  discount: '',
  discountPrice: '',
  specialPrice: '',
  seckillPrice: '',
  inStockDate: '',
  stock: 0,
  inventoryQuantity: 0,
  overflowQuantity: 0,
  description: '',
  status: '已报溢'
})

// 表单验证规则
const addFormRules = {
  recordTime: [{ required: true, message: '请选择录单时间', trigger: 'blur' }],
  orderNo: [{ required: true, message: '请输入单据编号', trigger: 'blur' }],
  overflowPerson: [{ required: true, message: '请输入报溢人', trigger: 'blur' }],
  warehouse: [{ required: true, message: '请选择报溢仓库', trigger: 'blur' }],
  productName: [{ required: true, message: '请选择产品名称', trigger: 'blur' }],
  productNo: [{ required: true, message: '请输入产品编号', trigger: 'blur' }],
  brand: [{ required: true, message: '请输入归属品牌', trigger: 'blur' }],
  spec: [{ required: true, message: '请输入规格', trigger: 'blur' }],
  type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
  retailPrice: [{ required: true, message: '请输入零售价', trigger: 'blur' }],
  overflowQuantity: [{ required: true, message: '请输入报溢数量', trigger: 'blur' }]
}

// 仓库下拉选项
const warehouseOptions = [
  { label: '1号仓库', value: '1号' },
  { label: '2号仓库', value: '2号' },
  { label: '3号仓库', value: '3号' },
  { label: '4号仓库', value: '4号' }
]

// 产品下拉选项
const productOptions = [
  { label: '丝芙兰精华眼霜', value: '丝芙兰精华眼霜' },
  { label: '兰蔻精华眼霜', value: '兰蔻精华眼霜' },
  { label: '雅诗兰黛小棕瓶', value: '雅诗兰黛小棕瓶' }
]

// 报溢单数据
const overflowOrderList = reactive([
  {
    index: 1,
    overflowTime: '2022.10.02',
    orderNo: 'mcc01',
    productName: '丝芙兰精华眼霜',
    productNo: 'mcc01',
    brand: '丝芙兰',
    spec: '10ml',
    type: '套盒',
    retailPrice: '¥93.88',
    discount: '单品2.1 套盒3.9',
    discountPrice: '¥111.62',
    specialPrice: '¥93.88',
    seckillPrice: '¥91.88',
    inStockDate: '2022.8.29',
    warehouse: '1号',
    stock: 65,
    inventoryQuantity: 202,
    overflowQuantity: 1,
    status: '已报溢'
  },
  {
    index: 2,
    overflowTime: '2022.10.02',
    orderNo: 'mcc01',
    productName: '丝芙兰精华眼霜',
    productNo: 'mcc01',
    brand: '丝芙兰',
    spec: '10ml',
    type: '套盒',
    retailPrice: '¥93.88',
    discount: '单品2.1 套盒3.9',
    discountPrice: '¥111.62',
    specialPrice: '¥93.88',
    seckillPrice: '¥91.88',
    inStockDate: '2022.8.29',
    warehouse: '1号',
    stock: 65,
    inventoryQuantity: 202,
    overflowQuantity: 2,
    status: '已报溢'
  },
  {
    index: 3,
    overflowTime: '2022.10.04',
    orderNo: 'mcc01',
    productName: '兰蔻精华眼霜',
    productNo: 'mcc03',
    brand: '兰蔻',
    spec: '10ml',
    type: '套盒',
    retailPrice: '¥93.88',
    discount: '单品2.1 套盒3.9',
    discountPrice: '¥111.62',
    specialPrice: '¥93.88',
    seckillPrice: '¥91.88',
    inStockDate: '2022.8.29',
    warehouse: '1号',
    stock: 65,
    inventoryQuantity: 202,
    overflowQuantity: 3,
    status: '已报溢'
  }
])

// 过滤后的报溢单（分页）
const filteredOverflowOrder = computed(() => {
  // 这里可以添加搜索过滤逻辑，当前示例仅做分页
  totalRecords.value = overflowOrderList.length
  totalPages.value = Math.ceil(totalRecords.value / pageSize.value)
  const startIndex = (currentPage.value - 1) * pageSize.value
  return overflowOrderList.slice(startIndex, startIndex + pageSize.value)
})

// 生命周期：初始化
onMounted(() => {
  // 模拟加载数据
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
})

// 分页事件
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1 // 重置到第一页
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 查询事件
const handleSearch = () => {
  // 这里可以添加实际的搜索逻辑，如接口请求
  ElMessage.info('查询功能已触发，可根据条件筛选报溢单')
  currentPage.value = 1 // 搜索后重置到第一页
}

// 返回事件
const handleBack = () => {
  router.back()
}

// 新增报溢单
const handleAddOverflowOrder = () => {
  isEdit.value = false
  // 重置表单
  Object.assign(addForm, {
    recordTime: '',
    orderNo: '',
    overflowPerson: '',
    warehouse: '',
    productName: '',
    productNo: '',
    brand: '',
    spec: '',
    type: '',
    retailPrice: '',
    discount: '',
    discountPrice: '',
    specialPrice: '',
    seckillPrice: '',
    inStockDate: '',
    stock: 0,
    inventoryQuantity: 0,
    overflowQuantity: 0,
    description: '',
    status: '已报溢'
  })
  addDialogVisible.value = true
}

// 保存报溢单
const handleSaveOverflowOrder = () => {
  const addFormRef = getCurrentInstance().refs.addFormRef
  addFormRef.validate((valid) => {
    if (valid) {
      loading.value = true
      setTimeout(() => {
        // 模拟新增逻辑
        const newId = overflowOrderList.length + 1
        const newOrder = {
          ...addForm,
          index: newId,
          overflowTime: new Date().toISOString().split('T')[0].replace(/-/g, '.'),
          status: '已报溢'
        }
        overflowOrderList.unshift(newOrder)
        addDialogVisible.value = false
        loading.value = false
        ElMessage.success('报溢单已新增')
      }, 500)
    }
  })
}
</script>

<style scoped>
.overflow-order-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.page-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.search-form {
  margin-bottom: 20px;
}

.action-buttons {
  margin-bottom: 20px;
}

.order-table {
  width: 100%;
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.total-info {
  color: #606266;
  font-size: 14px;
}

.add-form {
  margin-top: 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-form .el-row {
    flex-wrap: wrap;
  }
}
</style>